<!DOCTYPE html>
<html lang="zxx">

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>Sujon - 404</title>

		<!-- css include -->
		<link rel="stylesheet" type="text/css" href="css/materialize.css">
		<link rel="stylesheet" type="text/css" href="css/icofont.css">
		<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
		<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">

		<!-- my css include -->
		<link rel="stylesheet" type="text/css" href="css/custom-menu.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">

	</head>


	<body>




		<div class="thetop"></div>
		<!-- for back to top -->

		<div class='backToTop'>
			<a href="#" class='scroll'>
				<span>T</span>
				<span>O</span>
				<span>P</span>
				<span class="go-up">
					<i class="icofont icofont-long-arrow-up"></i>
				</span>
			</a>
		</div>
		<!-- backToTop -->




		<!-- ==================== header-section Start ==================== -->
		<header id="header-section" class="header-section w100dt navbar-fixed">

			<nav class="nav-extended main-nav">
				<div class="container">
					<div class="row">
						<div class="nav-wrapper w100dt">

							<div class="logo left">
								<a href="index.html" class="brand-logo">
									<img src="img/logo.png" alt="brand-logo">
								</a>
							</div>
							<!-- logo -->

							<div>
								<a href="#" data-activates="mobile-demo" class="button-collapse">
									<i class="icofont icofont-navigation-menu"></i>
								</a>
								<ul id="nav-mobile" class="main-menu center-align hide-on-med-and-down">
									<li><a href="index.html">HOME</a></li>
									<li><a href="cateogry.html">CATEGORIES</a></li>
									<li class="dropdown">
										<a href="#">PAGES <i class="icofont icofont-simple-down"></i></a>
										<ul class="dropdown-container">
											<li><a href="404.html">404 Page</a></li>
										</ul>
										<!-- /.dropdown-container -->
									</li>
									<li><a href="single-blog.html">BLOG SINGLE</a></li>
									<li><a href="contact.html">CONTACT</a></li>
								</ul>
								<!-- /.main-menu -->

								<!-- ******************** sidebar-menu ******************** -->
								<ul class="side-nav" id="mobile-demo">
									<li class="snavlogo center-align"><img src="img/logo.png" alt="logo"></li>
									<li><a href="index.html">HOME</a></li>
									<li><a href="cateogry.html">CATEGORIES</a></li>
									<li><a href="single-blog.html">SINGLE BLOG</a></li>
									<li><a href="contact.html">CONTACT</a></li>
									<li class="active"><a href="404.html">404 PAGE</a></li>
								</ul>
							</div>
							<!-- main-menu -->

							<a href="#" class="search-trigger right">
								<i class="icofont icofont-search"></i>
							</a>
							<!-- search -->
							<div id="myNav" class="overlay">
								<a href="javascript:void(0)" class="closebtn">&times;</a>
								<div class="overlay-content">
									<form>
										<input type="text" name="search" placeholder="Search...">
										<br>
										<button class="waves-effect waves-light" type="submit" name="action">Search</button>
									</form>
								</div>
							</div>

						</div>
						<!-- /.nav-wrapper -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</nav>

		</header>
		<!-- /#header-section -->
		<!-- ==================== header-section End ==================== -->






		<!-- ==================== header-section Start ==================== -->
		<section id="breadcrumb-section" class="breadcrumb-section w100dt mb-30">
			<div class="container">

				<nav class="breadcrumb-nav w100dt">
					<div class="page-name hide-on-small-only left">
						<h4>404 ERROR</h4>
					</div>
					<div class="nav-wrapper right">
						<a href="index.html" class="breadcrumb">Home</a>
						<a href="404.html" class="breadcrumb active">404 ERROR</a>
					</div>
					<!-- /.nav-wrapper -->
				</nav>
				<!-- /.breadcrumb-nav -->

			</div>
			<!-- container -->
		</section>
		<!-- /.breadcrumb-section -->
		<!-- ==================== header-section End ==================== -->





		<!-- ==================== error-section start ==================== -->
		<section id="error-section" class="error-section w100dt mb-50">
			<div class="container">

			<div class="error-contant center-align">
				<h2 class="error-head-title">404</h2>
				<p>
					It looks like that page no longer exists. Would you like to go to <a href="index.html">homepage</a> instead?
				</p>
			</div>
			<!-- /.error-contant -->

			</div>
			<!-- container -->
		</section>
		<!-- /#error-section -->
		<!-- ==================== error-section end ==================== -->





		<!-- ==================== instag leftram-section Start ==================== -->
		<section id="instagram-section" class="instagram-section w100dt">

			<div class="instagram-link w100dt">
				<a href="#">
					<span>FIND US ON INSTAGRAM</span>
					@SUJONMAJIDESIGN
				</a>
			</div>

		</section>
		<!-- /#instag leftram-section -->
		<!-- ==================== instag leftram-section End ==================== -->





		<!-- ==================== footer-section Start ==================== -->
		<footer id="footer-section" class="footer-section w100dt">
			<div class="container">

				<div class="footer-logo w100dt center-align mb-30">
					<a href="#" class="brand-logo">
						<img src="img/logo.png" alt="brand-logo">
					</a>
				</div>
				<!-- /.footer-logo -->

				<ul class="footer-social-links w100dt center-align mb-30">
					<li><a href="#" class="facebook">FACEBOOK</a></li>
					<li><a href="#" class="twitter">TWITTER</a></li>
					<li><a href="#" class="google-plus">GOOGLE+</a></li>
					<li><a href="#" class="linkedin">LINKDIN</a></li>
					<li><a href="#" class="pinterest">PINTEREST</a></li>
					<li><a href="#" class="instagram">INSTAGRAM</a></li>
				</ul>

				<p class="center-align">
					<i class="icofont icofont-heart-alt l-blue"></i>  
					All Right Reserved, Deasined by 
					<a href="#" class="l-blue">HTMLmate</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
				</p>

			</div>
			<!-- container -->
		</footer>
		<!-- /#footer-section -->
		<!-- ==================== footer-section End ==================== -->










		<!-- my custom js -->
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/materialize.js"></script>
		<script type="text/javascript" src="js/owl.carousel.min.js"></script>

		<!-- my custom js -->
		<script type="text/javascript" src="js/custom.js"></script>

		<script type="text/javascript">
		</script>


	</body>

</html>